<template>
	<view class="refund-apply pb200" v-if="!loadding" :class="theme() || ''" :data-theme='theme()'>
		<form @submit="formSubmit" @reset="formReset">
			<view class="one-product d-s-c p30 bg-white br20">
				<view class="cover">
					<image :src="product.image.file_path || ''" mode="aspectFit"></image>
				</view>
				<view class="flex-1">
					<view class="f30 gray3 mb20">{{product.product_name}}</view>
					<view class="gray9 f24 mb20" v-if="product.spec_type==20">{{ product.product_attr }}</view>
					<view class="d-b-c f24 gray9">
						<text class="f28 gray3">
							¥<text class="f36 fb">{{product.line_price}}</text>
						</text>
						<text class="f24 gray9">
							数量：{{product.total_num}}
						</text>
					</view>
				</view>
			</view>
			<!-- 服务类型 -->
			<view class="group bg-white br20">
				<view class="group-hd border-b-e">
					<view class="left">
						<text class="min-name">请选择售后类型</text>
					</view>
				</view>
				<view class="d-s-c p-20-0">
					<button class="defalut-btn" v-if="product.orderM.delivery_type.value!=30" type="default"
						:class="type==10?'theme-borderbtn':''" @click="tabType(10)">退货退款</button>
					<button class="defalut-btn" v-if="product.orderM.delivery_type.value!=30" type="default"
						:class="type==20?'ml20 theme-borderbtn':'ml20'" @click="tabType(20)">换货</button>
					<button class="defalut-btn" type="default" :class="type==30?'ml20 theme-borderbtn':'ml20'"
						@click="tabType(30)">仅退款</button>
				</view>
			</view>

			<!--申请原因-->
			<view class="group bg-white br20" style="padding-bottom: 30rpx;">
				<view class="group-hd">
					<view class="left">
						<text class="min-name">申请原因</text>
					</view>
				</view>
				<view class="d-s-c">
					<textarea v-model="form.content" class="p10 box-s-b border flex-1 f28 lh150" name="content"
						placeholder="请详细填写申请原因，注意保持商品的完好，建议您先与卖家沟通" />
				</view>
			</view>

			<!--退款金额-->
			<view class="group bg-white br20" v-if="type==10 || type==30">
				<view class="group-hd">
					<view class="left">
						<text class="min-name">退款金额:</text>
						<text class="theme-price f28 fb">¥{{product.total_pay_price}}</text>
					</view>
				</view>
			</view>

			<!--上传图片-->
			<view class="group bg-white br20" style="padding-bottom: 30rpx;">
				<view class="group-hd">
					<view class="left">
						<text class="min-name">上传凭证</text>
						<text class="gray9">(最多6张)</text>
					</view>
				</view>
				<view class="upload-list d-s-c">
					<view class="item" v-for="(imgs,img_num) in images" :key="img_num" @click="deleteFunc(imgs)">
						<image :src="imgs.file_path" mode="aspectFit"></image>
					</view>
					<view class="item d-c-c d-stretch" v-if="images.length<6">
						<view class="upload-btn d-c-c d-c flex-1" @click="openUpload()">
							<text class="icon iconfont icon-xiangji f34"></text>
							<text class="gray9">上传图片</text>
						</view>
					</view>
				</view>
			</view>

			<view class="foot-btns">
				<!-- #ifdef H5 -->
				<template v-if="isWeixin() && mpState == 1&&temlIds!=''">
					<wx-open-subscribe :template="temlIds" id="subscribe-btn" @success="subscribeSuccess"
						@error="subscribeFail">
						<div v-is="'script'" type="text/wxtag-template" slot="style">
							<div v-is="'style'">
								#subscribe-btn{
								width: 100%;
								}
								.subscribe-btn{
								border: 1px solid #f6220c;
								background: #f6220c;
								color: #fff;
								border-radius:56px;
								float: right;
								}
								.subscribe-btn.theme0{
								background: #ff5704;
								border: '1px solid #ff5704';
								}
								.subscribe-btn.theme1{
								background: #19ad57;
								border: '1px solid #19ad57';
								}
								.subscribe-btn.theme2{
								background: #ffcc00;
								border: '1px solid #ffcc00';
								}
								.subscribe-btn.theme3{
								background: #33a7ff;
								border: '1px solid #33a7ff';
								}
								.subscribe-btn.theme4{
								background: #e4e4e4;
								border: '1px solid #e4e4e4';
								}
								.subscribe-btn.theme5{
								background: #c8ba97;
								border: '1px solid #c8ba97';
								}
								.subscribe-btn.theme6{
								background: #623ceb;
								border: '1px solid #623ceb';
								}
							</div>
						</div>
						<div v-is="'script'" type="text/wxtag-template">
							<div class="subscribe-btn" :class="theme()" :style="{
									width: btnAtrrpx.width+'px',
									height: btnAtrrpx.height+'px',
									lineHeight: btnAtrrpx.height+'px',
									paddingLeft: btnAtrrpx.paddingLeft+'px',
									paddingRight: btnAtrrpx.paddingLeft+'px',
									fontSize: btnAtrrpx.fontSize+'px',
								}">
								确认提交
							</div>
						</div>
					</wx-open-subscribe>
				</template>
				<template v-else>
					<button class="theme-btn" @click="formSubmit">确认提交</button>
				</template>
				<!-- #endif -->
				<!-- #ifndef H5 -->
				<button class="theme-btn" @click="formSubmit">确认提交</button>
				<!-- #endif -->
			</view>
		</form>
		<!--上传图片-->
		<Upload v-if="isUpload" @getImgs="getImgsFunc"></Upload>
	</view>


</template>

<script>
	import Upload from '@/components/upload/upload.vue';
	export default {
		components: {
			Upload
		},
		data() {
			return {
				/*是否加载完成*/
				loadding: true,
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				type: 10,
				/*是否打开上传图片*/
				isUpload: false,
				/*订单商品id*/
				order_product_id: 0,
				/*订单商品*/
				product: {
					image: {
						file_path: ''
					}
				},
				images: [],
				/*小程序订阅消息*/
				temlIds: [],
				urldata: "",
				btnAtrrpx: {},
				// 1 公众号登录
				mpState: null,
				form: {},
			}
		},
		onLoad(e) {
			this.order_product_id = e.order_product_id;
		},
		mounted() {
			let mpState = uni.getStorageSync('mpState');
			this.mpState = mpState;
			// #ifdef H5
			if (this.isWeixin()) {
				this.urldata = window.location.href;
				this.getBtnInfo();
				this.getTemplateId();
			}
			// #endif
			/*数据*/
			/*获取订单详情*/
			this.getData();
		},
		methods: {
			subscribeSuccess() {
				this.formSubmit();
				console.log("调用成功")
			},
			subscribeFail() {
				this.temlIds = [];
				this.formSubmit();
				console.log("调用失败")
			},
			getBtnInfo() {
				let self = this;
				let btnAtrrpx = {
					width: 152,
					height: 56,
					paddingLeft: 28,
					fontSize: 28,
				}
				uni.getSystemInfo({
					success: function(res) {
						let scale = res.screenWidth / 750;
						let newObj = {};
						for (let key in btnAtrrpx) {
							newObj[key] = btnAtrrpx[key] * scale;
						}
						self.btnAtrrpx = newObj;
					},
					fail() {
						self.btnAtrrpx = btnAtrrpx;
					},
				});
			},
			getTemplateId() {
				let self = this;
				self._post(
					'index/getSignPackage', {
						url: self.urldata,
						paySource: self.getPlatform(),
					},
					function(res) {
						// self.temlIds = res.data.templateArr;
						self.mpMessage(res.data.signPackage);
					}
				);
			},
			/*获取数据*/
			getData() {
				let self = this;
				uni.showLoading({
					title: '加载中'
				});
				self.loadding = true;
				let order_product_id = self.order_product_id;
				self._get('user.refund/apply', {
					order_product_id: order_product_id,
					platform: self.getPlatform()
				}, function(res) {
					self.loadding = false;
					self.product = res.data.detail;
					self.temlIds = res.data.template_arr;
					if (self.product.orderM.delivery_type.value == 30) {
						self.type = 30;
					}
					uni.hideLoading();
				});
			},
			/*切换服务类型*/
			tabType(e) {
				this.type = e;
			},

			/*提交表单*/
			formSubmit: function(e) {
				let self = this;
				var formdata = self.form;
				formdata.type = self.type;
				formdata.content = self.form.content || '';
				formdata.order_product_id = self.order_product_id;
				formdata.images = JSON.stringify(self.images);
				let callback = function() {
					uni.showLoading({
						title: '正在提交',
						mask: true
					});
					self._post('user.refund/apply', formdata, function(res) {
						uni.hideLoading();
						uni.showToast({
							title: res.msg,
							duration: 3000,
							complete: function() {
								self.gotoPage('/pages/order/refund/index/index');
							}
						});
					});
				}
				self.subMessage(self.temlIds, callback);
			},

			/*打开上传图片*/
			openUpload() {
				this.isUpload = true;
			},

			/*获取上传的图片*/
			getImgsFunc(e) {
				let self = this;
				self.isUpload = false;
				if (e && typeof(e) != 'undefined') {
					let this_length = self.images.length,
						upload_length = e.length;
					if (this_length + upload_length < 7) {
						self.images = self.images.concat(e);
					} else {
						let leng = 6 - this_length;
						for (let i = 0; i < leng; i++) {
							self.images.push(e[i]);
						}
					}
				}
			},
			/*删除图片*/
			deleteFunc(e) {
				this.images.splice(e, 1);
			}
		}
	}
</script>

<style lang="scss">
	.cover {
		margin-right: 20rpx;
	}

	.refund-apply {
		padding: 20rpx;
		padding-bottom: 160rpx;
	}

	.group .defalut-btn {
		background: none;
		border: 1px solid #DDDDDD;
		color: #333333;
		font-size: 28rpx;
		width: 208rpx;
		height: 68rpx;
		line-height: 68rpx;
		display: flex;
		justify-content: center;
		padding: 0;
		box-sizing: border-box;
		border-radius: 68rpx;
	}

	.upload-list .item,
	.upload-list .upload-btn {
		border-radius: 15rpx;
		overflow: hidden;
	}
</style>